<style>
  div {
    width: 500px;
    height: 500px;
    /* 圆锥渐变的渐变方向和起始点。起始点是图形中心，然后以顺时针方向绕中心实现渐变效果。*/
    /* background: conic-gradient(deeppink, yellowgreen) */
    /* hsl() 被定义为色相-饱和度-明度（Hue-saturation-lightness） */
    /* background: conic-gradient(red, orange, yellow, green, teal, blue, purple); */
    border-radius: 50%;
    /* 配合百分比可以轻松实现饼图 */
    /* 我们分别指定了 0~30%，30%~70%，70%~100% 三个区间的颜色分别为 deeppink(深红)，yellowgreen(黄绿) 以及 teal(青) */
    background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
    /*这种写法和上面的写法是一样的效果*/
    /* background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, teal 0 100%);  */
    /* 0-30% 的区间使用 deeppink
      0-70% 的区间使用 yellowgreen
      0-100% 的区间使用 teal
      而且，先定义的颜色的层叠在后定义的颜色之上。 相当于叠了三层*/


  }
</style>
<div></div>